<template><!-- 仓库详情 -->
  <div class="my-warehouse-box">  
    <div class="warehouse-box">
        <div class="warehouse-reple-top">
            <div class="warehouse-title">{{warehouseReple.name}}</div>
            <div class="warehouse-concat">
                <span>{{warehouseReple.contacts}}</span> <span class="warehouse-concat-phone">{{warehouseReple.telephone}}</span>  
            </div>
        </div>
        <div class="warehouse-reple-bottom">
          {{warehouseReple.province + warehouseReple.city + warehouseReple.district + warehouseReple.address}}
        </div>
    </div>
    
    <div class="goods-box">
        <div class="goods-list" v-for="(item,index) in goodsList" :key="index"> 
            <div class="goods-left">
                <img :src="item.poster" alt="" class="goods-img">
            </div>
            <div class="goods-right">
                <div class="goods-name">{{item.goodsName}}</div>
                <div class="goods-price"><span>单价:</span>￥{{item.supplyBoxprice}}/箱</div>
                <div class="goods-num"><span>库存(包):</span>{{item.stock}}</div>
            </div>
            <div class="num-opt-box">
                <div class="opt-item isbtn" @click="optNum(index,1)">-</div>
                <div class="">
                    <input class="opt-input" v-model="item.repNUm" :max="item.stock" type="number" placeholder="0" >
                </div>
                <div class="opt-item isbtn" @click="optNum(index,2)">+</div>
            </div>
        </div>
    </div>
     <div class="add-btn isbtn" @click="addGoods">+添加商品</div>
    <div class="height120"></div>
    <div class="btn-box">   
       <div class="isbtn rightline" @click="onConfirm">提交</div>
    </div>
    <confirm v-model="confirm_show"
        :title="confirm.title"   
        @on-confirm="onConfirm" >
        <p style="text-align:center;">{{ confirm.content }}</p>
      </confirm>
  </div>
</template>

<script>
import row from '@/components/row'
import api from '@/api/api.js' 
import { Confirm } from 'vux'
import { Message } from 'element-ui' 
export default { 
  components: {
    row,
    Confirm
  },
  data () {
    return {
        goodsList:this.$store.state.warehouseRepleGoods, 
        confirm:{
            content:'',
            title:'',
        },
        confirm_show:false,
        warehouseReple: this.$store.state.warehouseReple,
        detail:{}
    }
  },
  mounted () {
    // this.getDetail( this.$route.query.id );
  },
  filters: {
     
  },
  methods: {  
    addGoods(){
        console.log(this.goodsList)
        this.$store.commit("setWarehouseRepleGoods",this.goodsList);
        this.$router.push({path:"/chooseReplenisGoods",query:{id:this.warehouseReple.replWarehouseId}})       
    },
    submit(){
        // this.confirm={
        //     content:'确认提交?',
        //     title:'提示',
        // };
        // this.confirm_show = true;
    },
    onConfirm(){
    //   let goodsArr = [] ; 
    //   this.goodsList.forEach((item,index)=>{
    //     if(!item.repNUm){
    //       return Message({
    //         message: "商品采购数量必须大于0",
    //         type: 'error',
    //         duration: 1 * 1000
    //       }) 
    //     }
    //     if(item.repNUm > item.stock){
    //       return Message({
    //         message: "商品"+ item.goodsName +"的采购数量超出库存",
    //         type: 'error',
    //         duration: 1 * 1000
    //       }) 
    //     }
    //     if(this.goodsList.length==0){
    //         return  Message({
    //         message: "请选择采购商品！",
    //         type: 'error',
    //         duration: 1 * 1000
    //         }) 
    //     } 
    //     goodsArr.push({
    //       goodsId:item.goodsId,
    //       goodsNum:item.repNUm
    //     })
    //   })  
       let goodsArr = [] ; 
       console.log(this.goodsList);
        for(let i = 0 ; i< this.goodsList.length ; i++ ){
            const item = this.goodsList[i];
            if(!item.repNUm || item.repNUm<=0){
            return Message({
                message: "商品采购数量必须大于0",
                type: 'error',
                duration: 1 * 1000
            }) 
            }
            if(item.repNUm>item.stock){
            return Message({
                message: "商品"+ item.goodsName +"的采购数量超出库存",
                type: 'error',
                duration: 1 * 1000
            }) 
            }
            goodsArr.push({
                goodsId:item.goodsId,
                goodsNum:item.repNUm
            })
        }
        this.$vux.confirm.show({
            title: '提示',
            content: '确认提交？',  
            onCancel () { 
            }, 
            onConfirm: ()=> {
               api.warehouseMng.warehouseSubmit({
                    "storeId":this.$route.query.id,
                    "replwarehouseId": this.warehouseReple.replWarehouseId,
                    "goodsList":JSON.stringify(goodsArr)
                },res=>{ 
                    this.$vux.confirm.show({
                        title: '提示',
                        content: '您已成功下单,可在补货订单中查看该订单状态。',  
                        showCancelButton:false,
                        onCancel () { 
                        }, 
                        onConfirm: ()=> {
                            this.$router.push("/warehouseOrder");
                        }
                    })
                })
            }
        })
        

    },
    optNum(index,idx){ 
        if(idx==1){//减法
            if(!this.goodsList[index].repNUm || this.goodsList[index].repNUm<=0){
                this.$set( this.goodsList[index],"repNUm",0)
                return
            }else{
                this.$set( this.goodsList[index],"repNUm",this.goodsList[index].repNUm-1)
                 
            } 
        }else{//加法
            if(!this.goodsList[index].repNUm){ //不存在设为0 
                 this.$set( this.goodsList[index],"repNUm",0)
            }
            if(this.goodsList[index].repNUm>=this.goodsList[index].stock){  //不能超过库存
                return  Message({
                    message: "已超出该商品最大库存",
                    type: 'success',
                    duration: 1 * 1000
                })
            }else{
                 this.$set( this.goodsList[index],"repNUm",this.goodsList[index].repNUm+1) 
            }
        }
    },
    // 获取详情
    getDetail(id){
        api.shopMng.shopDetail({
            "storeId": id
        },res=>{ 
            this.detail = res.result;
        })

    }
  }
}
</script>
<style lang="less" scoped>
.my-warehouse-box{
    padding-top: 1px;
    min-height: 100vh;
    background: #fbfbfb;
    .warehouse-reple-top{
        display: flex;
        justify-content: space-between;
        .warehouse-title{
            font-weight: bold;
            font-size: .30rem;
        }
        .warehouse-concat-phone{
            margin-left: .08rem;
            color: #999;
        }
    }
    .warehouse-reple-bottom{
        margin-top: .24rem;
        font-size: .24rem;
        line-height: .24rem;
        color: #999;
    }
}

.add-btn{
    height: .68rem;
    width: 5.9rem;
    margin: .80rem auto;
    border-radius: .34rem;
    text-align: center;
    line-height: .68rem;
    color: #fff;
    // background: #FABE00;
    border: 1px solid #FABE00;
    color: #FABE00;
    white-space: .4rem;
}
.num-opt-box{
    position: absolute;
    bottom: .24rem;
    right: .24rem;
    height: .56rem;
    border-radius: .28rem;
    display: flex;
    border: 1px solid #eee;
    overflow: hidden;
    .opt-item{
        width: .56rem;
        height: .56rem;
        line-height: .56rem;
        text-align: center;
    }
    .opt-input{
        outline: none;
        width: 0.60rem;
        height: .56rem;
        text-align: center;
        border: none;
    }
}
.height120{
    height: 1.20rem;
}
.warehouse-box{
    padding: .24rem;
    background: #fff;
    margin-bottom: .24rem ; 
    box-shadow: 2px 2px .40rem 0 rgba(36, 36, 36, 0.05);;
} 
.btn-box{
    display: flex;
    background: #fff;
    height: 50px;
    box-sizing: border-box;
    position: fixed;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.06);;
    bottom: 0;
    left: 0;
    right: 0;
    &>div{
        flex: 1;
        text-align: center;
        line-height: 50px;
    }
    .rightline{
        position: relative;
        background: #FABE00;
        color: #fff;
        &::before{
            content: '';
            right: 0;
            top: 18px;
            position: absolute;
            bottom: 18px;
            width: 1px;
            background: #e1e1e1;
        }
    }

}
.goods-box{
    padding: 0.24rem;
    background: #fff;
}
.goods-list{
    display: flex;
    padding: .20rem 0;
    position: relative;
    &::before{
        position: absolute;
        bottom: 0;
        content: '';
        left: 0;
        right: -20px;
        height: 1px;
        background: #f5f5f5;
    }
}

.goods-img{
    width: 1.48rem;
    height: 1.48rem;
    border-radius: .12rem;
    background: #ddd;
}
.goods-name{
    font-size: .30rem;
    font-weight: bold;
    line-height: .34rem;
}
.goods-price,.goods-num{
    
    font-size: .24rem;
    & span{
        margin-right: .12rem;
        color: #999;
    }
}
.goods-right{
    width: 1.48rem;
    height: 1.48rem;
    flex: 1;
    padding-left: .20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

</style>
